<template>
  <div class="detail-product-specifications" v-if="Object.keys(skuInfo).length && isShow">
    <div class="layer-shade" @click="layerShade"></div>
    <div class="layer-child">
      <div class="top">
        <img :src="topImg" alt="">
        <span>￥{{ topPrice }}</span>
      </div>
      <b-scroll class="bScroll">
        <div class="prop" v-for="(prop,index) in skuInfo.props" :key="index">
          <p class="propTitle">{{ prop.label }}</p>
          <div class="commodity">
            <div v-for="(item,indey) in prop.list" :key="indey" class="standard-style"
                 :class="{isChosen: item.styleId === currentStyleId || item.sizeId === currentSizeId}"
                 @click="commodityStyleClick(index,indey)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="stock">
          <div class="stockCount">
            <span>购买数量</span>
            <span>库存{{ stockCount }}件</span>
          </div>
          <plus-and-minus-buttons :count="purchaseCount"
                                  :minus-disabled="purchaseCount <= 1"
                                  :plus-disabled="purchaseCount >= stockCount"
                                  @decremental="decremental"
                                  @incremental="incremental"/>
        </div>
      </b-scroll>
      <div class="submitBtn">
        <button type="button" :disabled="skuInfo.totalStock === 0" @click="submitBtnClick">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@/components/component/bScroll/BScroll";
import PlusAndMinusButtons from "@/components/component/plusAndMinusButtons/PlusAndMinusButtons";

import {LOGIN_TOKEN, routerPath} from "@/common/constant";
import {DetailShopCartClass} from "./detailClass"

export default {
  name: "DetailProductSpecifications",
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    iid: {
      type: String
    },
    title: {
      type: String
    },
    desc: {
      type: String
    },
    skuInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    BScroll,
    PlusAndMinusButtons
  },
  data() {
    return {
      topImg: null,
      topPrice: null,
      currentStyleId: null,
      currentSizeId: null,
      styleName: null,
      size: null,
      xdSkuId: null,
      stockCount: 0,
      purchaseCount: 1,
      msgIndex: null
    }
  },
  methods: {
    layerShade() {
      this.$emit("close");
    },
    commodityStyleClick(index, indey) {
      let prop = this.skuInfo.props[index];
      prop.list.forEach((item, ind) => {
        if (ind === indey) {
          if (prop.label === '颜色:') {
            this.styleName = item.name;
            this.currentStyleId = item.styleId;
          }
          if (prop.label === '尺码:') {
            this.size = item.name;
            this.currentSizeId = item.sizeId;
          }
        }
      })
      let findItem = this.skuInfo.skus.find(item => item.styleId === this.currentStyleId && item.sizeId === this.currentSizeId);
      if (findItem) {
        this.xdSkuId = findItem.xdSkuId;
        this.topImg = findItem.img;
        this.topPrice = (findItem.nowprice / 100).toFixed(2);
        this.stockCount = findItem.stock;
      }
    },
    submitBtnClick() {
      if (!localStorage.getItem(LOGIN_TOKEN)) {
        return this.$router.push(routerPath.login);
      }
      this.$layer.close(this.msgIndex);
      if (!this.currentStyleId) {
        this.msgIndex = this.$layer.msg("请选择一个颜色", {time: 1});
        return;
      }
      if (!this.currentSizeId) {
        this.msgIndex = this.$layer.msg("请选择一个尺码", {time: 1});
        return;
      }
      let detailShopCartObject = new DetailShopCartClass(this.iid, this.title, this.styleName, this.size, this.topImg, this.topPrice, this.purchaseCount, this.xdSkuId);
      this.$store.dispatch("addToShopCart", detailShopCartObject).then(() => this.$emit("success"));
    },
    decremental() {
      this.purchaseCount--;
    },
    incremental() {
      this.purchaseCount++;
    }
  },
  watch: {
    skuInfo(obj) {
      this.topImg = obj.skus[0].img;
      this.topPrice = (obj.skus[0].nowprice / 100).toFixed(2);
      this.stockCount = obj.totalStock;
    }
  }
}
</script>

<style scoped>
.detail-product-specifications {
  position: relative;
}

.detail-product-specifications .layer-shade {
  background-color: rgba(0, 0, 0, .7);
  pointer-events: auto;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.detail-product-specifications .layer-child {
  display: flex;
  flex-direction: column;
  position: absolute;
  padding: 15px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  animation: layer-anim-up .3s;
  pointer-events: auto;
  width: 100%;
  bottom: 0;
  background-color: var(--color-background);
  height: 70vh;
}

.top {
  padding: 10px 0;
  border-bottom: 2px solid #f2f5f8;
}

.top img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  vertical-align: middle;
}

.top span {
  padding-left: 10px;
  color: #f13e3a;
}

.bScroll {
  flex: 1;
}

.prop {
  padding: 0 0 10px 0;
  border-bottom: 2px solid #f2f5f8;
}

.propTitle {
  margin: 10px 0;
}

.commodity {
  display: flex;
  flex-wrap: wrap;
}

.commodity .isChosen {
  color: #f13e3a;
  border: 1px solid #f13e3a;
}

.stock {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}

.stock .stockCount span:first-child {
  font-size: var(--font-size);
}

.stock .stockCount span:last-child {
  font-size: 13px;
  color: #999;
  padding-left: 15px;
}

.submitBtn {
  background-color: var(--color-background);
}

.submitBtn button {
  display: block;
  color: #fff;
  padding: 5px 0;
  /*margin-bottom: 10px;*/
  width: 100%;
  height: 32px;
  border-radius: 25px;
  border: none;
  background-color: orangered;
}
</style>